<template>
  <div>
    <page-tools :show-before="true">
      <span slot="before">共{{ total }}条记录</span>
      <template slot="after">
        <el-button size="small" :disabled="!checkPermission('importEmployee')" type="warning" @click="$router.push('/import')">导入</el-button>
        <el-button size="small" type="danger">导出</el-button>
        <el-button size="small" type="primary" @click="showDialog=true">新增员工</el-button>
      </template>
    </page-tools>
    <!-- 卡片 -->
    <el-card>

      <el-table border :data="emploteesList">
        <el-table-column label="序号" sortable="" type="index" />
        <el-table-column label="头像" sortable="" width="180">
          <template #default="{row}">
            <img v-imgerr="require('@/assets/common/head.jpg')" :src="row.staffPhoto" alt="" class="heardImg">
          </template>
        </el-table-column>
        <el-table-column prop="username" label="姓名" sortable="" />
        <el-table-column prop="workNumber" label="工号" sortable="" />
        <el-table-column prop="enableState" :formatter="formatterFn" label="聘用形式" sortable="" />
        <el-table-column prop="departmentName" label="部门" sortable="" />
        <el-table-column label="入职时间" sortable="">
          <!-- 作用域插槽:过滤器的使用 -->
          <template #default="{row}">
            {{ row.timeOfEntry | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="账户状态" sortable="">
          <template #default="{row}">
            <!-- 作用域插槽:开关处理 -->
            <el-switch
              v-model="row.enableState"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="2"
              :disabled="true"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" sortable="" fixed="right" width="280">
          <template #default="{row}">
            <el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button type="text" size="small" @click="assignRole(row.id)">角色</el-button>
            <el-button type="text" size="small" @click="delEmploess(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          :total="total"
          :page-size="pageSetting.size"
          layout="prev, pager, next"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <!-- 新增员工组件 -->
    <AddEmployee :show-dialog="showDialog" />
    <!-- 角色弹窗组件 -->
    <AssignRole ref="AssignRole" :show-dialog.sync="showAssignRole" />
  </div>
</template>

<script>
import { getEmplyeeList, delEmplyee } from '@/api/emplyeeList'
import EmployeesConstdate from '@/api/constant/employees'
import AddEmployee from './conpments/add-Employee.vue'
// 引入角色弹窗组件
import AssignRole from './conpments/assign-role.vue'
export default {
  components: {
    AddEmployee,
    AssignRole
  },
  data() {
    return {
      total: 0,
      emploteesList: [],
      pageSetting: {
        page: 1,
        size: 5
      },
      showDialog: false,
      showAssignRole: false
    }
  },
  created() {
    this.getEmployees()
  },
  methods: {
    // 删除员工
    async delEmploess(id) {
      // 二次询问
      await this.$confirm('确认删除吗')
      // 发起删除请求
      await delEmplyee(id)
      // 删除成功提示
      this.$message.success('删除成功')
      // 重新渲染刷新页面
      this.getEmployees()
    },
    async getEmployees() {
      const { rows, total } = await getEmplyeeList(this.pageSetting)
      this.total = total
      this.emploteesList = rows
      // console.log(this.emploteesList)
    },
    currentChange(newPage) {
      this.pageSetting.page = newPage
      this.getEmployees()
    },
    formatterFn(row, clo, cell, index) {
      const obj = EmployeesConstdate.hireType.find(item => item.id === cell)
      return obj ? obj.value : '未知形式'
    },
    // 员工角色弹窗事件
    async assignRole(id) {
      await this.$refs.AssignRole.getUserDetail(id)
      this.showAssignRole = true
    }

  }
}
</script>
<style lang='scss'>
 .page-tools {
    margin: 10px 0;
    .before {
      line-height: 34px;
    i {
      margin-right: 5px;
      color: #409eff;
    }
    display: inline-block;
    padding: 0px 10px;
    border-radius: 3px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
  }
 }
 .heardImg{
   width: 100px;
   height: 100px;
   object-fit: cover;
 }
</style>
